<template>
  <div class="edit-entity-page">
    <div class="view-head">
      <div class="title">实体管理编辑</div>
      <div>
        <el-button class="btn" size="mini" type="primary" @click="save"
          >保存</el-button
        >
        <el-button class="btn" size="mini" type="primary" @click="goBack"
          >返回</el-button
        >
      </div>
    </div>
    <div class="view-entity">
      <el-form
        ref="entityFormRef"
        :model="form"
        :rules="rules"
        label-width="100px"
        class="content"
      >
        <section class="entity-msg">
          <div class="header">
            <div class="msg">实体信息</div>
          </div>

          <el-form-item
            label="所属类型："
            prop="ontologyName"
            class="form-item-pub"
          >
            <el-input
              v-model="form.ontologyName"
              placeholder=""
              class="public-input"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="实体名称："
            prop="entityName"
            :class="form.entityStatus == 0 ? 'form-item-pub' : 'upload'"
          >
            <el-input
              v-if="form.entityStatus == 0"
              v-model="form.entityName"
              placeholder=""
              class="public-input"
            ></el-input>
            <div v-if="form.entityStatus == 1" class="content-upload">
              <el-upload
                ref="upload"
                class="avatar-uploader"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleEntitySuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="form.entityName"
                  :src="form.entityName"
                  class="avatar"
                  style="width: 72px; height: 72px"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <el-button
                  size="small"
                  type="primary"
                  class="reupload upload-button"
                  v-if="form.entityName"
                  >重新上传</el-button
                >
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item
            label="实体模态："
            prop="entityStatus"
            class="form-item-pub"
          >
            <el-radio-group
              v-model="form.entityStatus"
              @change="handleStatusChange"
            >
              <el-radio :label="0">文本</el-radio>
              <el-radio :label="1">图片</el-radio>
            </el-radio-group></el-form-item
          >
          <el-form-item
            label="标识码："
            prop="targetNumber"
            class="form-item-pub"
          >
            <el-input
              v-model="form.targetNumber"
              placeholder=""
              class="public-input"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="置信度："
            prop="confidence"
            class="form-item-pub"
          >
            <el-input v-model="form.confidence" class="public-input">
              <!-- <i slot="suffix">%</i> -->
            </el-input>
          </el-form-item>
          <el-form-item
            label="消歧标识："
            prop="remark"
            class="form-item-remark"
          >
            <div class="content-remark">
              <div
                v-for="(item, index) in form.remark"
                :key="index"
                class="remark-item"
              >
                <el-input
                  v-model="form.remark[index]"
                  placeholder=""
                  class="remark public-input"
                ></el-input>
                <i
                  class="el-icon-close content-icon"
                  style="margin-bottom: 18px"
                  @click="deleteRemark(index)"
                ></i>
              </div>
              <div class="add-remark" @click="addRemark">
                <el-button
                  icon="el-icon-plus"
                  class="add-btn"
                  style="margin-left: 16px"
                  >添加</el-button
                >
                <!-- <i class="el-icon-circle-plus-outline"></i> -->
              </div>
            </div>
          </el-form-item>
          <el-form-item label="实体简介：" prop="details">
            <el-input
              type="textarea"
              :rows="6"
              placeholder="请输入内容"
              v-model="form.details"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="图片上传：" class="pictureUp upload">
            <div class="content-upload">
              <el-upload
                ref="upload"
                class="avatar-uploader"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <i
                  class="el-icon-close cancel-picture"
                  @click.stop="picCancel"
                  v-if="imageUrl"
                ></i>
                <el-button
                  size="small"
                  type="primary"
                  class="reupload upload-button"
                  v-if="imageUrl"
                  >重新上传</el-button
                >
              </el-upload>
            </div>
          </el-form-item>
        </section>
        <section class="property-msg">
          <div
            class="header"
            style="justify-content: space-between; margin-bottom: 18px"
          >
            <div class="msg">属性信息</div>
          </div>
          <div v-if="form.commonPropertyList.length === 0" class="no-peoperty">
            暂无数据
          </div>
          <div
            style="margin-bottom: 22px"
            class="content"
            v-for="(item, index) in form.commonPropertyList"
            :key="index"
            v-else
          >
            <el-input
              v-model="item.propertyName"
              placeholder="请输入属性名"
              class="content-key"
              :disabled="true"
            ></el-input>
            <template>
              <!-- 图片或文件 -->
              <div
                v-if="
                  item.propertyType == 'image' || item.propertyType == 'file'
                "
                class="content-value"
                :style="{
                  color: '#6f8def',
                  cursor: 'pointer',
                  display: 'flex',
                  alignItems: 'center',
                }"
                @click="getImageOrFile(item.propertyValue)"
              >
                {{ item.fileName }}
              </div>
              <!-- 其他属性 -->
              <el-input
                v-else
                v-model="item.propertyValue"
                placeholder="请输入属性值"
                class="content-value"
                :disabled="true"
              ></el-input>
            </template>
          </div>
        </section>
        <section class="self-property-msg">
          <div class="msg" style="margin-bottom: 18px">私有属性</div>
          <div
            class="content"
            v-for="(item, index) in form.entityPropertyList"
            :key="index"
          >
            <el-form-item
              label-width="0"
              :prop="`entityPropertyList.${index}.propertyName`"
              :rules="[
                {
                  required: true,
                  message: '请输入属性名',
                  trigger: ['change', 'blur'],
                },
                {
                  validator: validatePropertyName,
                  trigger: ['change', 'blur'],
                },
              ]"
            >
              <el-input
                class="content-key"
                v-model="item.propertyName"
                placeholder="请输入属性名"
                style="margin-right: 10px"
                @input="(val) => changePropVal(val, index)"
              ></el-input>
              <!-- <span
                style="margin-right: 20px; cursor: pointer; color: #6f8def"
                @click="bindOntologyProp(index)"
                >去选择</span
              > -->
            </el-form-item>
            <el-form-item
              label-width="0"
              :prop="`entityPropertyList.${index}.propertyType`"
              class="dialog-inline"
              :rules="{
                required: true,
                message: '请选择属性类型',
                trigger: 'change',
              }"
            >
              <el-select
                v-model="item.propertyType"
                @change="(val) => changePropertyType(val, index)"
                class="content-key"
              >
                <el-option
                  v-for="obj in propertyTypeOptions"
                  :key="obj.key"
                  :value="obj.key"
                  :label="obj.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label-width="0"
              class="value-inline"
              :prop="`entityPropertyList.${index}.propertyValue`"
              :rules="[
                {
                  validator: validatePass,
                  trigger: ['change', 'blur'],
                  required: true,
                },
              ]"
            >
              <!-- 枚举值类型 -->
              <el-select
                class="content-value"
                v-model="item.propertyValue"
                v-if="item.propertyBind == 'enum'"
              >
                <el-option
                  v-for="(eItem, index) in item.enumNames"
                  :key="index"
                  :label="eItem"
                  :value="eItem"
                ></el-option>
              </el-select>
              <!-- 非枚举值 -->
              <template v-else>
                <!-- 字符 数字类型 坐标 或没有设置类型 都是input输入框 -->
                <el-input
                  class="content-value"
                  v-if="
                    item.propertyType == 'text' ||
                    item.propertyType == 'int' ||
                    item.propertyType == 'float' ||
                    !item.propertyType
                  "
                  type="input"
                  v-model.trim="item.propertyValue"
                ></el-input>
                <!-- 日期格式 -->
                <el-date-picker
                  v-if="item.propertyType == 'date'"
                  class="content-value"
                  :picker-options="
                    pickerOptions(item.startRange, item.endRange)
                  "
                  v-model="item.propertyValue"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  :clearable="false"
                >
                </el-date-picker>
                <!-- 时间格式 -->
                <el-date-picker
                  v-if="item.propertyType == 'datetime'"
                  class="content-value"
                  :picker-options="
                    pickerOptions(item.startRange, item.endRange)
                  "
                  v-model="item.propertyValue"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :clearable="false"
                >
                </el-date-picker>
                <!-- 坐标 -->
                <span v-if="item.propertyType == 'coordinate'"
                  >经度：<el-input
                    v-model="item.coordX"
                    class="small-input"
                    style="width: 150px"
                  ></el-input
                  >维度：<el-input
                    class="small-input"
                    v-model="item.coordY"
                    style="width: 150px"
                  ></el-input
                ></span>
                <!-- 图片和文件 -->
                <span v-if="item.propertyType == 'file'">{{
                  item.fileName
                }}</span>

                <img
                  v-if="item.propertyType == 'image'"
                  :src="item.propertyValue"
                  style="width: 40px; height: auto"
                  alt=""
                />
                <el-upload
                  v-if="
                    item.propertyType == 'image' || item.propertyType == 'file'
                  "
                  class="upload-demo"
                  :before-upload="
                    (file) => {
                      beforeUpload(file, item);
                    }
                  "
                  :show-file-list="false"
                  action=""
                >
                  <el-button
                    size="small"
                    type="primary"
                    style="margin-left: 20px"
                    >上传</el-button
                  >
                </el-upload>

                <!-- 数组类型 用多选 -->
                <template v-if="item.propertyType == 'array'">
                  <el-select
                    v-model="item.propertyValue"
                    multiple
                    filterable
                    allow-create
                    default-first-option
                    class="hide-select content-value"
                    popper-class="hide-always"
                  ></el-select>
                  <el-tooltip
                    content="当前属性为数组类型，输入一项后按回车继续"
                  >
                    <i
                      class="el-icon-warning"
                      style="margin-left: 5px; font-size: 16px"
                    ></i>
                  </el-tooltip>
                </template>
              </template>
            </el-form-item>
            <i
              class="el-icon-delete content-icon"
              @click="deleteProperty('self', index)"
            ></i>
          </div>
          <el-button
            icon="el-icon-plus"
            class="add-btn"
            @click="addProperty('self')"
            style="margin-bottom: 18px"
            >添加
          </el-button>
        </section>
        <section class="origin-msg">
          <div class="header">
            <div class="msg">实体溯源</div>
            <div class="edit-button">
              <span>来源数量：</span><span>{{ entitySourceSize }}</span>
            </div>
          </div>

          <el-table
            :data="tableData"
            border
            :header-cell-style="{ background: 'rgba(61, 96, 212, 0.12)' }"
            style="width: 100%"
            class="entity_table"
          >
            <el-table-column type="index" label="序号" width="80">
            </el-table-column>

            <el-table-column prop="fileName" label="数据源名称" align="center">
            </el-table-column>

            <el-table-column
              prop="fileType"
              label="类型"
              width="160"
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="fileSize"
              label="大小(M)"
              align="center"
              width="160"
            >
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-link
                  :underline="false"
                  type="primary"
                  class="form-action"
                  :href="`${
                    $api.knowledgeMap.downloadSourceFile
                  }?fileUrl=${scope.row.fileUrl.replace(/\\/g, '/')}&fileName=${
                    scope.row.fileName
                  }`"
                >
                  下载</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </section>
      </el-form>
    </div>
    <SelectOntologyProp
      ref="selectOntologyPropRef"
      @select-property="selectPropertyVal"
    ></SelectOntologyProp>
  </div>
</template>

<script>
import SelectOntologyProp from "@/components/knowledgeManage/SelectOntologyProp.vue";
//置信度校验
const checkPercentage = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("置信度不能为空"));
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error("请输入数字值"));
    } else {
      if (value < 0 || value > 100) {
        callback(new Error("0~100"));
      } else {
        callback();
      }
    }
  }, 0);
};
export default {
  components: {
    SelectOntologyProp,
  },
  data() {
    const formatCheck = (rule, value, callback) => {
      if (!/^(0|1|(0\.\d{1,4}))$/g.test(value)) {
        callback(new Error("置信度只能是0或1或0~1之间的小数,小数最多四位"));
      } else {
        callback();
      }
    };
    return {
      propertyTypeObj: {
        text: "字符串",
        int: "整数值",
        float: "浮点值",
        date: "日期",
        datetime: "日期时间",
        coordinate: "坐标",
        array: "数组",
        image: "图片",
        file: "文件",
      },
      propertyTypeOptions: [
        { key: "text", label: "字符串" },
        { key: "int", label: "整数值" },
        { key: "float", label: "浮点值" },
        { key: "date", label: "日期" },
        { key: "datetime", label: "日期时间" },
        { key: "coordinate", label: "坐标" },
        { key: "array", label: "数组" },
        { key: "image", label: "图片" },
        { key: "file", label: "文件" },
      ],
      form: {
        remark: [],
        confidence: 1,
        details: "",
        entityName: "",
        entityStatus: "",
        targetNumber: "",
        ontologyName: "",
        disambiguationIdentify: "",
        entityPropertyList: [],
        commonPropertyList: [],
        fileId: "",
        ontologyId: "",
        projectId: "",
      },
      rules: {
        entityName: [
          {
            required: true,
            message: "请输入实体名称",
            trigger: ["change", "blur"],
          },
        ],
        confidence: [
          {
            trigger: "blur",
            validator: formatCheck,
          },
        ],
      },
      uploadUrl: this.$api.knowledgeMap.uploadUrl,
      imageUrl: "", //上传图片回显地址
      ontologyProperty: [], // 本体属性
      selectProperty: [],
      entitySourceSize: "",
      tableData: [],
      oldOntologyId: null, // 归属本体id
      operaPropIdx: null, // 归属本体id
      hasEdit: false, // 监测表单是否被编辑过
      unWatch: null, // 同步侦听器
    };
  },
  created() {
    this.getEntityDetail();
  },
  beforeDestroy() {
    this.unWatch(); // 移除同步侦听器
  },
  methods: {
    getImageOrFile(propertyValue) {
      window.open(propertyValue);
    },
    getEntityDetail() {
      let params = {
        entityId: this.$route.query.id,
      };
      this.$axios
        .get(`${this.$api.knowledgeMap.entityDetail}/${this.$route.query.id}`)
        .then((res) => {
          const { data, message, code } = res.data;
          if (code === 200) {
            if (Array.isArray(data.commonPropertyList)) {
              data.commonPropertyList = data.commonPropertyList.map((ms) => {
                Object.assign(ms, ms.ontologyProperty);
                if (ms.propertyType === "array") {
                  try {
                    ms.propertyValue = JSON.parse(ms.propertyValue);
                  } catch {
                    ms.propertyValue = [];
                  }
                }
                if (ms.propertyType === "coordinate") {
                  ms.coordX = ms.propertyValue.split(",")[0];
                  ms.coordY = ms.propertyValue.split(",")[1];
                }
                return ms;
              });
            }
            if (Array.isArray(data.privatePropertyList)) {
              data.entityPropertyList = data.privatePropertyList.map((es) => {
                es.propertyTypeName = this.propertyTypeObj[es.propertyType];
                if (es.propertyType === "array") {
                  try {
                    es.propertyValue = JSON.parse(es.propertyValue);
                  } catch {
                    es.propertyValue = [];
                  }
                }
                if (es.propertyType === "coordinate") {
                  es.coordX = es.propertyValue.split(",")[0];
                  es.coordY = es.propertyValue.split(",")[1];
                }
                return es;
              });
            }
            Object.assign(this.form, data);
            this.entitySourceSize = data.entitySourceSize;
            this.tableData = data.entitySourceList;
            this.form.remark = data.disambiguationIdentify.split(",");
            this.form.confidence = Number(this.form.confidence);
            this.form.ontologyId = data.ontologyId;
            this.form.projectId = data.projectId;
            this.imageUrl = data.fileId;
            this.oldOntologyId = data.ontologyId;
          } else {
            this.$message.warning(message);
          }
          this.unWatch = this.$watch(
            "form",
            (newValue) => {
              this.hasEdit = true;
            },
            { immediate: false, deep: true }
          );
        });
    },
    pickerOptions(startRange, endRange) {
      return {
        disabledDate: (time) => {
          if (endRange && endRange != "" && startRange && startRange != "") {
            return (
              time.getTime() > new Date(endRange).getTime() ||
              time.getTime() < new Date(startRange).getTime()
            );
          }
        },
      };
    },
    beforeUpload(file, item) {
      const formData = new FormData();
      formData.append("file", file);
      formData.append("pathType", item.propertyType);
      this.$axios
        .post(this.$api.knowledgeMap.uploadEntityPropertyFile, formData)
        .then((res) => {
          if (res.status == 200) {
            item.fileName = res.data.fileName;
            item.propertyValue = res.data.fileUrl;
            this.$message.success("上传成功");
            this.$forceUpdate();
          }
        });
    },
    validatePropertyName(rule, value, callback) {
      let flag1 = [
        ...this.form.commonPropertyList,
        this.form.privatePropertyList,
      ].find((i) => i.propertyName === value);
      if (flag1) {
        callback(new Error("属性名不能重复"));
      }
    },
    validatePass(rule, value, callback) {
      function findNumbers(str) {
        // 使用正则表达式匹配所有的数字
        const numbers = str.match(/\d+/g);
        return numbers || []; // 如果没有匹配到数字，则返回空数组
      }
      const foundNumbers = findNumbers(rule.field);
      let index = foundNumbers[0];
      let property = this.form.entityPropertyList[index];
      if (property.propertyType && property.propertyType == "coordinate") {
        // 属性值类型为坐标
        if (!property.coordX || !property.coordY) {
          callback(new Error("属性值不能为空"));
        } else {
          callback();
        }
      } else {
        if (value == "" || value == null) {
          callback(new Error("属性值不能为空"));
        } else {
          if (property.propertyType) {
            if (property.propertyBind == "no_bind") {
              callback();
            }
            if (property.propertyBind == "enum") {
              callback();
            }
            if (property.propertyBind == "range") {
              // 数字范围值 需要转换为number比较
              if (["int", "float"].includes(property.propertyType)) {
                if (
                  parseFloat(value) < parseFloat(property.startRange) ||
                  parseFloat(value) > parseFloat(property.endRange)
                ) {
                  callback(
                    new Error(
                      `属性值应在${property.startRange}~${property.endRange}之间`
                    )
                  );
                } else {
                  callback();
                }
              } else {
                if (value < property.startRange || value > property.endRange) {
                  callback(
                    new Error(
                      `属性值应在${property.startRange}~${property.endRange}之间`
                    )
                  );
                } else {
                  callback();
                }
              }
            }
          } else {
            callback();
          }
        }
      }
    },

    addRemark() {
      let remarkItem = "";
      this.form.remark.push(remarkItem);
    },
    deleteRemark(index) {
      this.form.remark.splice(index, 1);
    },
    // 切换实体模态
    handleStatusChange() {
      this.form.entityName = "";
    },
    changePropertyType(val, index) {
      let property = this.form.entityPropertyList[index];
      if (["coordinate", "array", "image", "file"].includes(val)) {
        property.propertyBind = "no_bind";
        property.propertyBindDisabled = true;
      } else {
        property.propertyBindDisabled = false;
      }
      if (["date", "datetime", "int", "float"].includes(val)) {
        property.startRange = "";
        property.endRange = "";
        property.propertyValue = "";
      }
      // 切换为字符串类型时 如果已经选择了范围约束类型 则重置
      if (val === "text" && property.propertyBind === "range") {
        property.propertyBind = "no_bind";
      }
    },
    addProperty(type) {
      let property = {
        propertyName: "",
        propertyValue: "",
        propertyType: "",
        startRange: "",
        endRange: "",
        coordX: "", //经度
        coordY: "", //维度
      };
      this.form.entityPropertyList.push(property);
    },
    // 修改属性名 应取消属性值组件的绑定约束
    changePropVal(val, index) {
      // let curProp = this.form.entityPropertyList[index]
      // if (curProp.propertyType) {
      //   for (let k in curProp) {
      //     if (!['propertyName', 'propertyValue'].includes(k)) {
      //       delete curProp[k]
      //     }
      //   }
      // }
    },
    bindOntologyProp(idx) {
      this.operaPropIdx = idx;
      this.$refs.selectOntologyPropRef.show(this.oldOntologyId);
    },
    selectPropertyVal(val) {
      Object.assign(this.form.entityPropertyList[this.operaPropIdx], val);
      this.$nextTick(() => {
        this.$refs.entityFormRef.clearValidate(
          `entityPropertyList.${
            this.form.entityPropertyList.length - 1
          }.propertyValue`
        );
      });
      console.log("this.$refs.entityFormRef", this.$refs.entityFormRef);
    },
    deleteProperty(type, index) {
      this.form.entityPropertyList.splice(index, 1);
      this.$refs.entityFormRef.clearValidate();
    },
    beforeAvatarUpload() {},
    save() {
      let notCompleteData = false;
      for (let item of this.form.entityPropertyList) {
        if (item.propertyName == "" || item.propertyValue == "") {
          notCompleteData = true;
          break;
        }
      }
      if (notCompleteData) {
        this.$message.warning("私有属性信息有未填项!");
        return;
      }
      if (this.form.confidence && !this.validConfidence(this.form.confidence)) {
        this.$message.warning("置信度只能是0或1或0~1之间的小数,小数最多四位");
        return;
      }
      let params = {
        projectId: this.form.projectId,
        entityId: this.$route.query.id,
        entityName: this.form.entityName, //实体名称
        entityStatus: this.form.entityStatus,
        targetNumber: this.form.targetNumber,
        ontologyId: this.form.ontologyId, //实体类型ID
        ontologyName: this.form.ontologyName,

        details: this.form.details, // 简介
        confidence: this.form.confidence.toString(), // 置信度
        disambiguationIdentify: this.form.remark.join(","), // 消歧标识
        fileId: this.form.fileId,
        commonPropertyList: this.form.commonPropertyList,
        entityPropertyList: this.form.entityPropertyList.map((i) => {
          if (i.propertyType === "array" && Array.isArray(i.propertyValue)) {
            i.propertyValue = JSON.stringify(i.propertyValue);
          }
          if (i.propertyType === "coordinate") {
            i.propertyValue = i.coordX + "," + i.coordY;
          }
          return i;
        }),
      };
      this.$axios
        .post(this.$api.knowledgeMap.updateEntity, params)
        .then((res) => {
          const { data, code, message } = res.data;
          if (code === 200) {
            // this.getEntityDetail()
            this.$message.success(message);
            this.$router.push({
              path: "/manage/entityManagement/view",
              query: {
                id: this.$route.query.id,
              },
            });
          } else {
            this.$message.warning(message);
          }
        });
    },
    // 检验输入数据是否是数字
    isNumber(val) {
      var regPos = /^\d+(\.\d+)?$/; //非负浮点数
      var regNeg =
        /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
      if (regPos.test(val) || regNeg.test(val)) {
        return true;
      } else {
        return false;
      }
    },
    validConfidence(val) {
      if (!/^(0|1|(0\.\d{1,4}))$/g.test(val)) {
        return false;
      } else {
        return true;
      }
    },
    // 上传实体图片
    handleEntitySuccess(response, file, fileList) {
      const { code, message, data } = response;
      if (code === 200) {
        this.$message.success(message);
        this.form.entityName = data;
      } else {
        // this.$message.error(message);
        this.form.entityName = "";
      }
    },
    handleAvatarSuccess(response, file, fileList) {
      const { code, message, data } = response;
      if (code === 200) {
        this.$message.success(message);
        this.imageUrl = URL.createObjectURL(file.raw);
        // this.imageUrl= data;
        this.form.fileId = data;
      } else {
        this.$message.error(message);
        this.form.fileId = "";
      }
    },
    picCancel() {
      this.imageUrl = false;
      this.form.fileId = "";
    },
    goBack() {
      // this.$router.go(-1);
      if (this.hasEdit) {
        this.$confirm("还未保存, 是否确认返回?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // this.$router.push("/manage/entityManagement");
            this.$router.back();
          })
          .catch(() => {});
      } else {
        this.$router.back();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.edit-entity-page {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: #333333;
  background: #ffffff;
  border-radius: 4px;

  .view-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    border-bottom: 1px solid #dddddd;
    padding: 0 32px;

    .title {
      font-size: 16px;
      font-weight: bold;
    }

    .btn {
      width: 77px;
      height: 32px;
    }
  }

  .content {
    .form-item-pub {
      height: 32px;
      line-height: 32px;

      /deep/ .el-form-item__label {
        line-height: 32px;
      }

      /deep/ .el-form-item__content {
        line-height: 32px;
      }
    }

    .form-item-remark {
      margin-bottom: 0;
    }

    .upload {
      height: 72px;
    }

    .content-detail {
      height: 138px;

      /deep/ .el-form-item__content {
        height: 100%;
        overflow-y: auto;
        background: #f8f8f8;
        border-radius: 2px;
        border: 1px solid #dddddd;
      }
    }
  }

  .content-icon {
    margin-left: 18px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border: 1px solid #dddddd;
    box-sizing: border-box;
    border-radius: 2px;
  }

  .content-icon:before {
    color: black;
  }

  .add-btn {
    width: 76px;
    height: 32px;
    padding: 6px;
    color: #4b71eb;
  }

  .add-btn:hover {
    border: 1px solid #4b71eb;
  }

  .no-peoperty {
    color: #bfbfbf;
    margin-bottom: 36px;
  }
}

.view-entity {
  width: 80%;
  padding: 32px;

  .msg {
    border-left: 4px solid #4b71eb;
    padding-left: 6px;
    font-size: 16px;
    height: 16px;
    line-height: 16px;
  }

  .entity-msg,
  .origin-msg {
    .header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 18px;
    }

    .edit-button {
      color: #4b71eb;
      cursor: context-menu;
    }

    .edit-icon {
      margin-right: 6px;
      font-size: 20px;
    }
  }

  .entity_table /deep/.cell {
    text-align: center;
  }

  .entity_table {
    /deep/ {
      .el-table__cell {
        padding: 6px 0;
      }
    }
  }

  .content {
    .public-input {
      width: 280px;

      /deep/ .el-input__inner {
        height: 32px;
      }
    }

    .content-remark {
      display: flex;
      flex-wrap: wrap;

      .remark-item {
        display: flex;
        align-items: center;
        margin-right: 20px;
      }

      .remark {
        margin-bottom: 18px;
      }
    }

    .avatar-uploader {
    }

    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      margin-right: 20px;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #4b71eb;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 72px;
      height: 72px;
      line-height: 72px;
      text-align: center;
      border: 1px dashed;
    }

    .avatar {
      width: 72px;
      height: 72px;
      display: block;
    }

    .content-upload {
      position: relative;
      display: flex;
      align-items: flex-end;

      i {
        border-radius: 6px;
        margin-right: 20px;
      }

      .upload-button {
        position: absolute;
        bottom: 14px;
        left: 96px;
        padding: 6px 5px;
        width: 60px;
        height: 22px;
      }

      .cancel-picture {
        position: absolute;
        left: 66px;
        top: -6px;
        background: #ee5564;
        transform: scale(0.7);
        color: #fff;
        width: 16px;
        display: block;
        height: 16px;
        border-radius: 8px;
      }
    }
  }

  .content .content-item {
    width: 80%;
  }

  .property-msg {
    width: 60%;

    .header {
      display: flex;
    }

    .property-msg-add {
      color: #4b71eb;
      cursor: context-menu;
    }
  }

  .property-msg,
  .self-property-msg {
    .content {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      :deep(.el-form-item) {
        margin-bottom: 0 !important;
      }

      .content-key {
        width: 280px;
        margin-right: 18px;
      }

      .content-key /deep/.el-input__inner {
        width: 280px;
        height: 32px;
      }
      .small-input /deep/.el-input__inner {
        width: 100%;
        height: 32px;
      }

      .content-value {
        width: 280px;
        // margin-bottom: 18px;
      }

      .content-value /deep/.el-input__inner {
        width: 280px;
        height: 32px;
      }
    }

    .add-self-property {
      height: 30px;
      margin-top: 16px;
      margin-left: 10px;
      line-height: 6px;
      font-size: 12px;
      width: 100px;
    }
  }
}
.value-inline {
  :deep(.el-form-item__content) {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
</style>
